import React from 'react';
import { Layout, Menu } from 'tdesign-react';

const { Header } = Layout;

const AppHeader = ({ activeKey, onNavChange }) => {
  return (
    <Header style={{
      backgroundColor: '#ffffff',
      boxShadow: '0 2px 12px rgba(0, 0, 0, 0.1)',
      position: 'sticky',
      top: 0,
      zIndex: 100,
      padding: 0
    }}>
      <div style={{ 
        display: 'flex', 
        justifyContent: 'space-between', 
        alignItems: 'center',
        padding: '0 40px',
        maxWidth: '1400px',
        margin: '0 auto',
        height: '70px'
      }}>
        <h1 style={{ 
          color: '#2563eb', 
          margin: 0,
          fontSize: '1.8rem',
          fontWeight: '800',
          letterSpacing: '-0.5px'
        }}>
          dolmo
        </h1>
        <Menu.HeadMenu
          theme="light"
          value={activeKey}
          onChange={onNavChange}
          
          style={{ 
            width: 'auto',
            minWidth: '300px',
            backgroundColor: 'transparent',
            border: 'none'
          }}
          mode="horizontal"
        >
          <Menu.MenuItem value="home">
            <span style={{ fontSize: '1rem', fontWeight: '500' }}>首页</span>
          </Menu.MenuItem>
          <Menu.MenuItem value="create">
            <span style={{ fontSize: '1rem', fontWeight: '500' }}>写文章</span>
          </Menu.MenuItem>
          <Menu.MenuItem value="about">
            <span style={{ fontSize: '1rem', fontWeight: '500' }}>关于</span>
          </Menu.MenuItem>
        </Menu.HeadMenu>
      </div>
    </Header>
  );
};

export default AppHeader;